<template>
  <el-dialog
    v-model="modalModel.visible"
    :title="modalModel.title"
    width="400px"
    :close-on-click-modal="false"
  >
    <el-form
      :model="formModel"
      label-width="80px"
      :rules="formModel.passwordRules"
      ref="editUserForm"
    >
      <el-form-item label="用户账号" prop="username">
        <el-input
          :value="formModel.username"
          disabled
        />
      </el-form-item>
      <el-form-item label="用户名称" prop="realName">
        <el-input
          :value="formModel.realName"
          disabled
        />
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          v-model="formModel.oldPassword"
          type="password"
          placeholder="请输入旧密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="formModel.newPassword"
          type="password"
          placeholder="请输入新密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="formModel.confirmPassword"
          type="password"
          placeholder="请确认新密码"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="modalModel.visible = false">取消</el-button>
      <el-button type="primary" @click="handleOk()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { commonUrl, userUrl } from '@/api/api'
import { postAction } from '@/request/request'

const props = defineProps({
  isAdd: {
    type: Boolean,
    default: false
  }
})

const url = {
  updatePassword: commonUrl.updatePassword
}

const modalModel = reactive({
  visible: false,
  title: "修改密码"
})
const formModel = reactive({
  username: '',
  realName: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
  passwordRules: {
    oldPassword: [
      { required: true, message: '请输入旧密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认新密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value !== formModel.newPassword) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }
})
const show = () => {
  modalModel.visible = true
}
const close = () => {
  modalModel.visible = false
}
const handleOk = () => {
  const httpUrl = props.isAdd ? url.add : url.edit
  postAction(httpUrl, {
    ...formModel
  })
    .then(res => {})
    .finally(() => {
      close()
    })
}

defineExpose({
  show,
  close,
  formModel,
})
</script>

<style scoped></style>
